/**
 * 商品详情
 */
import { Descriptions, Image, InputNumber,Tabs} from 'antd'
import React, { useEffect, useState } from 'react'
import {useParams} from 'react-router-dom'
//导入工具类
import $http from '../../Utils/request'
import storage from '../../Utils/storage'
import './table.css'
import Relevant from './Relevant'
import ProductDetailBut from '../ShoppingCart/ProductDetailBut'

//创建请求头文件
let config = {}
if(storage.get("token") !== null){
  config = {
    headers:
      {'Content-Type': 'application/json',
        'token':storage.get("token").data
      }
  }
}else{
  config = {
    headers:
      {'Content-Type': 'application/json'
      }
  }
}

function Details () {
  const {id} = useParams();
  const [isInfo , setIsInfo] = useState({});
  const [isProductNum,setIsProductNum] = useState(1);
  function getCharacter(){
    // 根据主键进行查询
    $http.get("http://localhost/mall-basic-service/basic/productinfo/queryProductInfoById/"+id,config)
      .then((response)=>{
        setIsInfo(response.data.data);
      })
  }
  //处理循环请求的问题
  useEffect(()=>{
    getCharacter();
  }, [])
  const onChangeInputNumber = (value) => {
    setIsProductNum(value);
  };


  return (
    <div className={'bodyDiv'}>
      <Descriptions title="商品详情" column={3} bordered={true} size={'middle'}>
        <Descriptions.Item column={9}><Image height={400} width={400} src={isInfo.logoImg}/></Descriptions.Item>
        <Descriptions.Item>
          商品名称：<span style={{fontSize:20}}>{isInfo.productName}</span>
          <br/>
          <br/>
          商品价格：<span style={{color:'red'}}>{isInfo.description}</span>
          <br/>
          <br/>
          提供商：<span style={{color:'red'}}>{isInfo.shopcompany}</span>
          <br/>
          <br/>
          商品数量：<span style={{color:'red'}}>{isInfo.storeNumber}</span>
          <br/>
          <br/>
          分类：<span style={{color:'red'}}>{isInfo.productTypeName}</span>
          <br/>
          <br/>
          分类编码：<span style={{color:'red'}}>{isInfo.productTypeCode}</span>
          <br/>
          <br/>
          品牌：<span style={{color:'red'}}>{isInfo.brandName}</span>
          <br/>
          <br/>
          参考价格：<span style={{color:'red'}}>{isInfo.marketPrice}</span>
          <br/>
          <br/>
          商品数量：
          <span className={'detailsInputNumberDiv'}><InputNumber min={1} max={100000} defaultValue={1} onChange={onChangeInputNumber} /></span>
          <br/>
          <br/>
          <ProductDetailBut data = {isInfo} dataNum = {isProductNum} />
        </Descriptions.Item>
        <Descriptions.Item>
          <Relevant/>
        </Descriptions.Item>
      </Descriptions>
      <Descriptions>
        <Descriptions.Item>
          <div>
            <Tabs defaultActiveKey="1">
              <Tabs.TabPane tab="商品详情" key="1">
                <div className={"productDetailsHtmlDiv"} dangerouslySetInnerHTML={{__html:isInfo.functionDesc}}/>
              </Tabs.TabPane>
              <Tabs.TabPane tab="商品规格" key="2">
                Content of Tab Pane 2
              </Tabs.TabPane>
            </Tabs>
          </div>
        </Descriptions.Item>
      </Descriptions>
    </div>
  )
}

export default Details;
